<script setup lang="ts">
import { ref } from 'vue'
// 引入其他页面组件
import HomePage from './views/HomeView.vue'
import AboutPage from './views/AboutView.vue'
import ReactivityPage from './views/ReactivityView.vue'
import TemplateSyntaxPage from './views/TemplateSyntaxView.vue'
import ComputedPage from './views/ComputedView.vue'
import WatchPage from './views/WatchView.vue'
import WatchEffectPage from './views/WatchEffectView.vue'
import LifecyclePage from './views/LifecycleView.vue'
import ComponentsPage from './views/ComponentsView.vue'
import FormPage from './views/FormView.vue'
import RouterDemoPage from './views/RouterDemoView.vue'
import PiniaPage from './views/PiniaView.vue'
import InjectionPage from './views/InjectionView.vue'
import ComposablesPage from './views/ComposablesView.vue'
import TransitionPage from './views/TransitionView.vue'
import PerformancePage from './views/PerformanceView.vue'

// 用于控制当前显示的页面
const currentPage = ref('home')
</script>

<template>
  <!-- 添加导航链接 -->
  <nav>
    <button @click="currentPage = 'home'">首页</button>
    <button @click="currentPage = 'about'">关于</button>
    <button @click="currentPage = 'reactivity'">响应式示例</button>
    <button @click="currentPage = 'template'">模板语法</button>
    <button @click="currentPage = 'computed'">计算属性</button>
    <button @click="currentPage = 'watch'">侦听器</button>
    <button @click="currentPage = 'watcheffect'">WatchEffect</button>
    <button @click="currentPage = 'lifecycle'">生命周期</button>
    <button @click="currentPage = 'components'">组件</button>
    <button @click="currentPage = 'form'">表单</button>
    <button @click="currentPage = 'router-demo'">路由测试</button>
    <button @click="currentPage = 'pinia'">状态管理</button>
    <button @click="currentPage = 'injection'">依赖注入</button>
    <button @click="currentPage = 'composables'">组合式函数</button>
    <button @click="currentPage = 'transition'">过渡动画</button>
    <button @click="currentPage = 'performance'">性能优化</button>
  </nav>

  <!-- 使用条件渲染显示不同页面 -->
  <component 
    :is="currentPage === 'home' 
      ? HomePage 
      : currentPage === 'about'
      ? AboutPage
      : currentPage === 'reactivity'
      ? ReactivityPage
      : currentPage === 'template'
      ? TemplateSyntaxPage
      : currentPage === 'computed'
      ? ComputedPage
      : currentPage === 'watch'
      ? WatchPage
      : currentPage === 'watcheffect'
      ? WatchEffectPage
      : currentPage === 'lifecycle'
      ? LifecyclePage
      : currentPage === 'components'
      ? ComponentsPage
      : currentPage === 'form'
      ? FormPage
      : currentPage === 'router-demo'
      ? RouterDemoPage
      : currentPage === 'pinia'
      ? PiniaPage
      : currentPage === 'injection'
      ? InjectionPage
      : currentPage === 'composables'
      ? ComposablesPage
      : currentPage === 'transition'
      ? TransitionPage
      : currentPage === 'performance'
      ? PerformancePage
      : HomePage" 
  />
</template>

<style scoped>

nav {
  margin: 20px 0;
}

button {
  margin: 0 10px;
  padding: 5px 15px;
}
</style>